import { createVNode, render } from 'vue'
import BaseDailog from '@/components/BaseDailog.vue'

const createDailog = function () {
  let box = document.createElement('div')
  const vnode = createVNode(
    // 基于单文件组件提供的内容，构建虚拟DOM
    BaseDailog,
    // 为提供组件传递porps值
    {
      title: '新课程添加',
      width: '600',
      confimText: '添加',
      onClosed: function () {
        // console.log('测试', vnode.component.ctx)
        // vnode.component.ctx
        document.body.removeChild(box)
      },
      fromOptions: {
        course_name: {
          type: 'text',
          label: '课程名称',
          placeholder: '请输入课程名称',
        },
        course_grade: {
          type: 'text',
          label: '年级',
          placeholder: '请输入年级',
        },
        course_location: {
          type: 'text',
          label: '课程地点',
          placeholder: '请输入课程地点',
        },
        course_credit: {
          type: 'number',
          label: '学分',
          placeholder: '请输入课程总学分',
        },
        course_max_size: {
          type: 'number',
          label: '教室人数',
          placeholder: '请输入课程总人数',
        },
        course_exam_date: {
          type: 'datetime',
          label: '考试时间',
          placeholder: '请输入课程考试时间',
        },
        course_exam_location: {
          type: 'text',
          label: '考试教室',
          placeholder: '请输入课程考试教室',
        },
      },
    },
  )
  // 将组件构建虚拟dom渲染到创建的容器中
  render(vnode, box)
  document.body.appendChild(box)
}

export const openAddDailog = function () {
  createDailog()
}
